<template>
  <div class="channel rescue-channel">
    <!-- 发布表单 -->
    <el-card class="create-post">
      <el-form :model="postForm" :rules="rules">
        <el-form-item label="动物照片" prop="images">
          <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :limit="3"
              multiple>
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="情况描述" prop="description">
          <el-input type="textarea" :rows="3" v-model="postForm.description"/>
        </el-form-item>
        <el-form-item label="发现地点" prop="location">
          <el-input v-model="postForm.location" placeholder="输入或选择地点">
            <el-button slot="append" icon="el-icon-location" @click="selectLocation"/>
          </el-input>
        </el-form-item>
        <el-form-item label="匿名发布">
          <el-switch v-model="postForm.anonymous"/>
        </el-form-item>
        <el-button type="primary" @click="submitPost">发布求助</el-button>
      </el-form>
    </el-card>

    <!-- 救助列表 -->
    <div class="rescue-list">
      <el-card
          v-for="post in posts"
          :key="post.id"
          :class="['rescue-item', `status-${post.status}`]">
        <div class="rescue-header">
          <el-image :src="post.images[0]" fit="cover"/>
          <div class="rescue-meta">
            <el-tag :type="statusMap[post.status].type">
              {{ statusMap[post.status].text }}
            </el-tag>
            <span class="location">{{ post.location }}</span>
            <span class="time">{{ post.time }}</span>
          </div>
        </div>
        <div class="rescue-content">{{ post.description }}</div>
        <div class="rescue-actions">
          <el-button
              v-if="isPostOwner(post)"
              type="text"
              @click="updateStatus(post)">
            更新状态
          </el-button>
          <comment-section
              :comments="post.comments"
              :allow-anonymous="true"
              @submit="handleComment"/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusMap: {
        0: { text: '待救助', type: 'danger' },
        1: { text: '救助中', type: 'warning' },
        2: { text: '已救助', type: 'success' }
      },
      postForm: {
        images: [],
        description: '',
        location: '',
        anonymous: false
      },
      rules: {
        images: [{ validator: this.validateImages, trigger: 'change' }],
        description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
        location: [{ required: true, message: '请填写地点', trigger: 'blur' }]
      }
    }
  },
  methods: {
    validateImages(rule, value, callback) {
      if (this.postForm.images.length === 0) {
        callback(new Error('至少上传一张照片'))
      } else {
        callback()
      }
    },
    selectLocation() {
      // 调用地图组件
    },
    isPostOwner(post) {
      return post.userId === this.user.id && !post.anonymous
    },
    // eslint-disable-next-line no-unused-vars
    updateStatus(post) {
      // 状态更新逻辑
    }
  }
}
</script>